<template>
	<view>
		<view>
			<scroll-view class="content" scroll-y @scrolltolower="scrollButtonClick" id="height" :style="'height:' + height + 'px ;'">
				<view class="search-input "><label class="iconfont icon-sousuo" />
					<input type="text" confirm-type="search" v-model="search" class="font-size30" placeholder="搜索"/>
				</view>
				<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover" v-for="(item,index) in notifyList"
				 :key="index" @tap="noticedetail(item)" v-if="notifyList.length!=0">
					<view class="cell-navigate">
						<view class="uni-list-data background-color-339AFF" v-model="item.F_IsRead">
							<label class="iconfont icon-gonggao icon-label-lin" />
						</view>
						<view class="uni-item-left">
							<view class="overflow-text font-size30 color-3A3A3A"><text class="redDot" v-if="item.F_IsRead==0"></text>{{item.F_Title | overstep}}</view>
							<view class="notify-user-time">
								<view class="color-9A9A9A font-size24">发布者：{{item.F_CreatorUserId}}</view>
								<view class="color-9A9A9A font-size24">{{item.F_CreatorTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="noContent" v-show="isNoData">
			<img :src="nodata" alt="">
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import config from '@/common/js/config.js'
	import helper from '@/common/js/helper.js'
	export default {
		data() {
			return {
				rows: 10,
				page: 1,
				total: 1,
				height: 0,
				notifys: [],
				search: '',
				nodata: config.Resources.message.nodata,
				height1: "",
				isNoData: false,
				
			}
		},
		computed: {
			notifyList: function() {
				let search = this.search;
				if (search) {
					return this.notifys.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				
				// console.log(this.notifys)
				return this.notifys;
			},
			noticeMsg: function() {
				return this.$store.state.wschat.noticeMsgDef
			}
		},
		
		
		filters: {
			overstep: function(value) {
				if (!value) return '';
				value = value.toString();
				if (value.length > 16) {
					return value.substring(0, 16) + '...';
				}
				return value;
			}
		},
		
		
		watch: {
			noticeMsg() {}
		},
		methods: {
			// searchInput(e){
			// 	this.search = e.detail.value
			// 	// console.log(e.detail.value)
			// },
			
			
			
			scrollButtonClick() {
				let _this = this;
				if (_this.total > _this.page) {
					_this.page += 1;
					//触发求
					helper.ajax({
						url: '/api/system/Message',
						method: 'GET',
						data: {
							pageSize: _this.rows, //每页行数
							currentPage: _this.page, //当前页
							type:"1"//公告
						},
						success: res => {
							let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
							this.total = _total;
							let notify = res.data.data.list;
							for (let i = 0; i < notify.length; i++) {
								this.notifys.push({
									'F_Id': notify[i].id,
									'F_Title': notify[i].title,
									'F_CreatorUserId': notify[i].creatorUser,
									'F_CreatorTime': helper.toDate(notify[i].creatorTime, 'yyyy-MM-dd HH:mm'),
									'F_IsRead': notify[i].isRead
								})
							}
						}
					});
				}
			},
			noticedetail(e) {
				if (e.F_IsRead == 0) {
					this.noticeMsg.noticeCount = this.noticeMsg.noticeCount - 1;
					let _notify = this.notifys;
					let _data = helper.jsonFind(_notify, function(v) {
						return v.F_Id == e.F_Id
					});
					if (_data.length > 0) {
						e.F_IsRead = 1;
					}
					const badge = uni.getStorageSync(config.Global.cache + '_Badge');
					let badgen = badge - 1;
					uni.setStorage({
						key: config.Global.cache + '_Badge',
						data: badgen
					});
				}
				uni.navigateTo({
					url: '../noticedetail/noticedetail?notifyid=' + e.F_Id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			/* 初始化 */
			init() {
				helper.ajax({
					url: '/api/system/Message', //公告
					method: 'GET',
					data: {
						pageSize: this.rows, //每页行数
						currentPage: this.page, //当前页
						type:"1"//公告
					},
					success: res => {
						// console.log(res)
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let notify = res.data.data.list;
						this.isNoData = notify.length > 0 ? false : true;
						// console.log(this.isNoData)
						for (let i = 0; i < notify.length; i++) {
							this.notifys.push({
								'F_Id': notify[i].id,
								'F_Title': notify[i].title,
								'F_CreatorUserId': notify[i].creatorUser,
								'F_CreatorTime': helper.toDate(notify[i].creatorTime, 'yyyy-MM-dd HH:mm:ss'),
								'F_IsRead': notify[i].isRead
							})
						}
					}
				});
			}
		},
		mounted() {
			uni.showLoading({ //loading提示框
				title: '加载中...',
				mask: true
			});
			let _this = this;
			// 获取设备宽度
			uni.getSystemInfo({
				success: function(res) {
					_this.height = res.windowHeight;
				}
			});
			if (this.notifyList.length > 0) {
				let search = uni.createSelectorQuery().select(".search-input");
				search.boundingClientRect(data => {
					_this.rows = Math.ceil((_this.height - data.height) / 58)
				}).exec();
				
			}
			//初始化数据
			_this.init();
			uni.hideLoading();
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6
	}

	.overflow-text {
		display: flex;
		align-items: center;
		width: 99%;
	}

	.uni-list-data {
		width: 66upx;
		height: 66upx;
	}

	.search-input {
		background-color: #fff;
	}

	.uni-list-cell {
		background-color: #fff;

		&:last-child {
			.cell-navigate::after {
				height: 0;
			}
		}
	}
</style>
